<template>
  <div class="container">
    <div class="app-container">
      <span @click="showDialog" class="dialog-link">点击我弹出对话框</span>
      <my-dialog
        :visible.sync="dialogVisible"
        :title="dialogTitle"
        :message="dialogMessage"
        @close="hideDialog"
      />
    </div>
  </div>
</template>

<script>
import MyDialog from '@/views/attendance/components/MyDialog.vue'
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '对话框标题',
      dialogMessage: '这是对话框的消息内容'
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    hideDialog() {
      this.dialogVisible = false
    }
  }
}
</script>
<style>
.dialog-link {
  float: right; /* 或使用flex布局的justify-content:flex-end; 如果容器已使用flex布局 */
  color: blue;
  cursor: pointer;
}
</style>
